<template>
    <div id="tabs">
        <div id="login_box">
            <h2 style="color:black;">科创信息管理</h2>
            <div id="input_box" style="margin-top:80px ;">
                <input type="text" placeholder="请输入用户名" v-model="account">
            </div>
            <div id="input_box">
                <input type="password" placeholder="请输入密码" v-model="password">
            </div>
            <div @click="logins" class="btn">登录</div><br>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import type { TypeLoginDto } from '../../type/logins'
import { logins } from '../../api/logins/login'
import { setToken } from '../../utils/auth'
import { setuser } from '../../utils/auth'
import { ElLoading } from 'element-plus';


export default defineComponent({
    setup() {
        const router = useRouter();
        const store = useStore();

        const data = reactive<TypeLoginDto>({
            account: '',
            password: '',
            name: '' as any,
        })
        const events = {
            logins() {
                const loading = ElLoading.service({
                    lock: true,
                    text: "Loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });

                logins({
                    account: data.account,
                    password: data.password,
                }).then((res: any) => {
                    loading.close();
                    if (res.result == 0) {
                        setToken(res.data.token)
                        setuser(JSON.stringify(res.data.user))
                        console.log('========', res.data.user)
                        router.push('/')
                    } else {
                        alert('密码或账号错误')
                    }
                })
            }
        }


        onMounted(() => {

        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>

<style scoped>
/* #tabs {
    background-image: linear-gradient(to right, #a6c1ee  ,#fbc2eb);
    background-size: 100%;
    height: 100%;
    width: 100%;
     min-height: 100%;
    background-color: #a6c1ee;
} */

body,
html {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#tabs {
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

#login_box {
    width: 358px;
    height: 458px;
    background-color: #fff;
    margin: auto;
    text-align: center;
    border-radius: 10px;
    padding: 50px 50px;
}


h2 {
    margin-top: 5%;
}

#input-box {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}

span {
    color: #fff;
}

input {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;

}

.btn {
    text-align: center;
    padding: 10px;
    width: 100%;
    margin-top: 40px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;

}

#sign_up {
    margin-top: 45%;
    margin-left: 60%;
}

a {
    color: #b94648;
}
</style>
  